import Top from '../components/top'
import '../assets/css/order.css'
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
export default function Order() {
    // 编程式导航
    const Navigate = useNavigate()
    const [goodsInfo, setGoosInfo] = useState(JSON.parse(sessionStorage.getItem("goodsList")))
    const [allPrice, setAllPrice] = useState(0)
    useEffect(() => {
        console.log(goodsInfo);
        // 合计金额
        const price = () => {
            let sum = 0;
            goodsInfo.map((item) => {
                sum += item.price * (item.num || item.ishot)
            })
            return sum.toFixed(2)
        }
        setAllPrice(price)
    }, [])
    // 点击跳转优惠卷页面
    const getcoupon = () => {
        Navigate('/youhui')
    }
    // 回退上一页
    const cliTop = () => {
        Navigate(-1)
    }
    return (<div className='indent'>
        <div className='header'>
            <Top />
            <div className='header_div'>
                <button onClick={() => cliTop()}>&lt;</button>
                <h1>确认订单</h1>
            </div>
        </div>
        <div className='path'>
            <div className='path_box'>
                <p>
                    代用名  137 ****** 2383</p>
                <p>
                    北京 北京市 朝阳区</p>
                <p>
                    豆各庄乡五方桥基地 1号楼2052
                </p>
            </div>
        </div>
        <div className='nav'>
            <div className='nav_top'>
                <img src={require('../assets/images/indent/编组 16@3x.png')} alt="" />
                <p>品牌精选</p>
            </div>
            <div className='nav_bom'>
                <span>以免运费</span>
                <span>|</span>
                <span onClick={() => getcoupon()}>领卷</span>
            </div>
        </div>

        {/* 商品信息 */}
        {
            goodsInfo.map(item => {
                return (
                    <div className='goods' key={item.id}>
                        <div className='goods_img'>
                            <img src={item.img} alt="" />
                        </div>
                        <div className='goods_detail'>
                            <p>
                                <span>限时</span>
                                {item.goodsname}
                            </p>
                            <p>
                                {item.description}
                            </p>
                            <p>
                                <span>¥ {item.price}</span>
                                <del>¥{item.market_price}</del>
                            </p>
                            <div className='goods_detail_div'>
                                <div className='p1'>
                                    <p className='sp1'> 七天无理由退货</p>
                                    <span className='sp2'>特价</span>
                                </div>
                                <div>
                                    x{item.num ? item.num : item.ishot}
                                </div>
                            </div>
                        </div>
                    </div>
                )
            })
        }

        <div className='footer'>
            <ul>
                <li>
                    <p>发票类型</p>
                    <p>不开发票  &gt;</p>
                </li>
                <li>
                    <p>售后免邮</p>
                    <p className='footer_p'>部分商家赠送</p>
                </li>
                <li>
                    <p>买家留言</p>
                    <input type="text" placeholder='填写内容需要雨商家协商并确认,45字以内' />
                </li>
            </ul>
        </div>
        <div className='footer footer_2'>
            <ul>
                <li>
                    <p>商品金额</p>
                    <p className='footer_p'>¥1998</p>
                </li>
                <li>
                    <p>优惠活动</p>
                    <p className='footer_p2'>- ¥200</p>
                </li>
                <li>
                    <p>优惠卷</p>
                    <p>暂无可用&gt;</p>
                </li>
            </ul>
        </div>

        {/* bottom */}
        <div className='bottom'>
            <div className='bot_1'>
                <p className='bot_p1'>
                    合计
                    <span>
                        ¥  {allPrice}
                    </span>
                </p>
                <p className='bot_p2'>
                    <span>已免运费</span>
                    <span>已优惠¥200元</span>
                </p>
            </div>
            <div className='bot_2'>
                <button>立即支付</button>
            </div>
        </div>
    </div>)
}